<template>
    <div class="about">
        <h1>This is an login page</h1>

        <form action="" @submit.prevent>
            <div class="input-group">
                <label>用户名:</label>
                <input type="text" v-model="user">
            </div>

            <div class="input-group">
                <label>密&emsp;码:</label>
                <input type="text" v-model="pwd">
            </div>

            <div class="input-group">
                <button @click="loginHandler">登录</button>
            </div>
        
        </form>

    </div>
</template>

<script>
export default {
    name: "LoginView",
    data(){
        return {
            // 当前组件中  user和pwd
            user:"",
            pwd:""
        }
    },
    methods:{
        loginHandler(){
            // 点击登录
            if(this.user&&this.pwd){
                this.updateUser(this.user);
                this.updateUser(this.pwd);

                // 登录成功  => 再回去
                // this.$router.replace({name:"detail",params:{id:this.$route.query.id}})
                this.$router.back();
                
            }else{
                alert("请传入完整信息")
            }
        }
    },
    // watch:{
    //     user(newVal){
    //         this.updateUser(newVal);
    //     },
    //     pwd(newVal){
    //         this.updatePwd(newVal);
    //     }
    // },
    inject:["updateUser","updatePwd"]
}
</script>


<style scoped>
    .input-group{
        margin-top: 10px;
    }
</style>
